<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康饮食 - 食谱列表</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 防止内容溢出 */
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        /* 确保容器不溢出 */
        .container {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }
        /* 分类滚动条优化 */
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800 pb-16">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex items-center">
            <a href="index.html" class="mr-3">
                <i class="fas fa-arrow-left text-gray-600"></i>
            </a>
            <h1 class="text-xl font-bold text-green-600">食谱库</h1>
        </div>
    </header>

    <!-- 搜索栏 -->
    <div class="bg-white p-4 shadow-sm">
        <div class="relative">
            <input type="text" placeholder="搜索食谱、菜系、食材..." class="w-full bg-gray-100 rounded-full py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-green-500">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
        </div>
    </div>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 食谱分类 -->
        <section class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-medium">食谱分类</h2>
                <a href="#" class="text-green-600 text-sm">查看全部</a>
            </div>
            
            <!-- 分类滚动横向列表 -->
            <div class="overflow-x-auto scrollbar-hide -mx-4 px-4">
                <div class="flex space-x-4 pb-2">
                    <div class="flex-shrink-0 w-20">
                        <div class="bg-green-100 rounded-lg p-3 flex flex-col items-center">
                            <i class="fas fa-seedling text-green-600 text-xl mb-2"></i>
                            <span class="text-xs text-gray-700">素食</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 w-20">
                        <div class="bg-red-100 rounded-lg p-3 flex flex-col items-center">
                            <i class="fas fa-drumstick-bite text-red-600 text-xl mb-2"></i>
                            <span class="text-xs text-gray-700">肉类</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 w-20">
                        <div class="bg-blue-100 rounded-lg p-3 flex flex-col items-center">
                            <i class="fas fa-fish text-blue-600 text-xl mb-2"></i>
                            <span class="text-xs text-gray-700">海鲜</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 w-20">
                        <div class="bg-yellow-100 rounded-lg p-3 flex flex-col items-center">
                            <i class="fas fa-egg text-yellow-600 text-xl mb-2"></i>
                            <span class="text-xs text-gray-700">早餐</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 w-20">
                        <div class="bg-purple-100 rounded-lg p-3 flex flex-col items-center">
                            <i class="fas fa-apple-alt text-purple-600 text-xl mb-2"></i>
                            <span class="text-xs text-gray-700">水果</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 w-20">
                        <div class="bg-indigo-100 rounded-lg p-3 flex flex-col items-center">
                            <i class="fas fa-bread-slice text-indigo-600 text-xl mb-2"></i>
                            <span class="text-xs text-gray-700">烘焙</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 菜系分类 -->
        <section class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-medium">菜系选择</h2>
            </div>
            <div class="grid grid-cols-4 gap-3">
                <button class="bg-white rounded-lg p-2 text-center shadow-sm hover:bg-green-50">
                    <span class="text-sm">川菜</span>
                </button>
                <button class="bg-white rounded-lg p-2 text-center shadow-sm hover:bg-green-50">
                    <span class="text-sm">粤菜</span>
                </button>
                <button class="bg-white rounded-lg p-2 text-center shadow-sm hover:bg-green-50">
                    <span class="text-sm">湘菜</span>
                </button>
                <button class="bg-white rounded-lg p-2 text-center shadow-sm hover:bg-green-50">
                    <span class="text-sm">鲁菜</span>
                </button>
                <button class="bg-white rounded-lg p-2 text-center shadow-sm hover:bg-green-50">
                    <span class="text-sm">苏菜</span>
                </button>
                <button class="bg-white rounded-lg p-2 text-center shadow-sm hover:bg-green-50">
                    <span class="text-sm">浙菜</span>
                </button>
                <button class="bg-white rounded-lg p-2 text-center shadow-sm hover:bg-green-50">
                    <span class="text-sm">徽菜</span>
                </button>
                <button class="bg-white rounded-lg p-2 text-center shadow-sm hover:bg-green-50">
                    <span class="text-sm">闽菜</span>
                </button>
            </div>
        </section>
        
        <!-- 热门食谱推荐 -->
        <section class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-medium">热门推荐</h2>
                <a href="#" class="text-green-600 text-sm">换一批</a>
            </div>
            <div class="bg-white rounded-lg shadow-sm">
                <!-- 热门食谱横向滚动 -->
                <div class="overflow-x-auto scrollbar-hide p-4">
                    <div class="flex space-x-4">
                        <div class="flex-shrink-0 w-40">
                            <a href="recipe-detail.html" class="block">
                                <div class="bg-gray-200 rounded-lg h-28 mb-2 overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c" alt="沙拉" class="w-full h-full object-cover">
                                </div>
                                <h3 class="font-medium text-sm line-clamp-1">健康蔬菜沙拉</h3>
                                <p class="text-xs text-gray-500">
                                    <i class="fas fa-fire text-orange-500 mr-1"></i>
                                    <span>280 千卡</span>
                                </p>
                            </a>
                        </div>
                        <div class="flex-shrink-0 w-40">
                            <a href="recipe-detail.html" class="block">
                                <div class="bg-gray-200 rounded-lg h-28 mb-2 overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1547592180-85f173990888" alt="烤三文鱼" class="w-full h-full object-cover">
                                </div>
                                <h3 class="font-medium text-sm line-clamp-1">地中海烤三文鱼</h3>
                                <p class="text-xs text-gray-500">
                                    <i class="fas fa-fire text-orange-500 mr-1"></i>
                                    <span>450 千卡</span>
                                </p>
                            </a>
                        </div>
                        <div class="flex-shrink-0 w-40">
                            <a href="recipe-detail.html" class="block">
                                <div class="bg-gray-200 rounded-lg h-28 mb-2 overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1551326844-4df70f78d0e9" alt="燕麦粥" class="w-full h-full object-cover">
                                </div>
                                <h3 class="font-medium text-sm line-clamp-1">水果燕麦粥</h3>
                                <p class="text-xs text-gray-500">
                                    <i class="fas fa-fire text-orange-500 mr-1"></i>
                                    <span>320 千卡</span>
                                </p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 食谱列表 -->
        <section>
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-medium">全部食谱</h2>
                <div class="flex items-center">
                    <span class="text-sm text-gray-500 mr-2">排序:</span>
                    <select class="text-sm bg-transparent focus:outline-none appearance-none pr-6 relative">
                        <option>综合排序</option>
                        <option>热量升序</option>
                        <option>热量降序</option>
                        <option>制作时间</option>
                    </select>
                    <i class="fas fa-chevron-down text-xs text-gray-500 -ml-5 pointer-events-none"></i>
                </div>
            </div>
            
            <!-- 食谱列表项 -->
            <div class="space-y-4">
                <a href="recipe-detail.html" class="block bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="flex">
                        <div class="w-1/3 h-24 bg-gray-200">
                            <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061" alt="鸡胸肉沙拉" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-3">
                            <h3 class="font-medium mb-1">鸡胸肉蔬菜沙拉</h3>
                            <div class="text-xs text-gray-500 mb-2">
                                <span class="mr-2"><i class="fas fa-utensils mr-1"></i>高蛋白</span>
                                <span><i class="far fa-clock mr-1"></i>15分钟</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-orange-500">
                                    <i class="fas fa-fire mr-1"></i>350 千卡
                                </span>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-400 text-xs"></i>
                                    <span class="text-xs ml-1">4.8</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                
                <a href="recipe-detail.html" class="block bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="flex">
                        <div class="w-1/3 h-24 bg-gray-200">
                            <img src="https://images.unsplash.com/photo-1546549032-9571cd6b27df" alt="水煮青菜" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-3">
                            <h3 class="font-medium mb-1">清蒸西兰花</h3>
                            <div class="text-xs text-gray-500 mb-2">
                                <span class="mr-2"><i class="fas fa-leaf mr-1"></i>素食</span>
                                <span><i class="far fa-clock mr-1"></i>10分钟</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-orange-500">
                                    <i class="fas fa-fire mr-1"></i>120 千卡
                                </span>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-400 text-xs"></i>
                                    <span class="text-xs ml-1">4.5</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                
                <a href="recipe-detail.html" class="block bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="flex">
                        <div class="w-1/3 h-24 bg-gray-200">
                            <img src="https://images.unsplash.com/photo-1529042410759-befb1204b468" alt="藜麦碗" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-3">
                            <h3 class="font-medium mb-1">彩虹藜麦碗</h3>
                            <div class="text-xs text-gray-500 mb-2">
                                <span class="mr-2"><i class="fas fa-seedling mr-1"></i>全谷物</span>
                                <span><i class="far fa-clock mr-1"></i>20分钟</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-orange-500">
                                    <i class="fas fa-fire mr-1"></i>420 千卡
                                </span>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-400 text-xs"></i>
                                    <span class="text-xs ml-1">4.7</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                
                <a href="recipe-detail.html" class="block bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="flex">
                        <div class="w-1/3 h-24 bg-gray-200">
                            <img src="https://images.unsplash.com/photo-1504754524776-8f4f37790ca0" alt="水果沙拉" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-3">
                            <h3 class="font-medium mb-1">混合水果沙拉</h3>
                            <div class="text-xs text-gray-500 mb-2">
                                <span class="mr-2"><i class="fas fa-apple-alt mr-1"></i>水果</span>
                                <span><i class="far fa-clock mr-1"></i>5分钟</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-orange-500">
                                    <i class="fas fa-fire mr-1"></i>180 千卡
                                </span>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-400 text-xs"></i>
                                    <span class="text-xs ml-1">4.6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
            <!-- 加载更多按钮 -->
            <button class="w-full py-3 mt-4 text-green-600 border border-green-600 rounded-lg">
                加载更多食谱
            </button>
        </section>
    </main>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around items-center py-2">
            <a href="index.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="food-search.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-search text-xl"></i>
                <span class="text-xs mt-1">搜索</span>
            </a>
            <a href="analysis.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-chart-pie text-xl"></i>
                <span class="text-xs mt-1">分析</span>
            </a>
            <a href="user.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </footer>
</body>
</html> 